<template>
	<view class="clock-in-panel">
		<cu-custom bgColor="text-156" :isBack="true">
			<block slot="content" >运维打卡</block>
		</cu-custom>
		<view class="info-panel">
			<view v-if="log" class="company-panel">
				<view class="company-top"></view>
				<view class="company-content">
					<view class="info-title">{{log.engineerName || '--'}}</view>
					<view class="info-item">
						<view class="label">打卡目的</view>
						<view class="value blud">{{log.objective}}</view>
					</view>
					<view class="info-item">
						<view class="label">到达时间</view>
						<view class="value">{{log.startTime}}</view>
					</view>
					<view class="info-item">
						<view class="label">离开时间</view>
						<view class="value">{{log.endTime || '未离开'}}</view>
					</view>
				</view>
			</view>
			<view v-else class="daoda-daka-item" @click="gotoPage('clockinForm')"/>
			
			<view class="likai-daka-item" @click="handleClock"/>
			<view class="daka-panel">
				<!-- <view class="daka-item" @click="gotoPage('clockinForm')"></view> -->
				<view class="daka-log-item" @click="gotoPage('clockinLog')"></view>
			</view>
				
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	const clockGetOne = '/system/clock/getOne'
	const clockUrl = '/system/clock'
	var position =''
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				startTime: '2020-05-12 12:23:00',
				endTime: '',
				formData: {
					position: '',
					type: 'e062_02',
					engineerId: -1
				},
				log: null
			}
		},
		onLoad(){
			uni.authorize && uni.authorize({
				scope: 'scope.userLocation',
				success() {
					uni.getLocation({
						type: 'gcj02', //返回可以用于uni.openLocation的经纬度
						success: function(res) {
							const latitude = res.latitude;
							const longitude = res.longitude;
							position = longitude +','+latitude
						}
					});
				}
			})
			this.initForm()
			
		},
		onShow(){
			this.initForm()
		},
		methods: {
			initForm() {
				// clockGetOne	
				this.$api.request(clockGetOne,{
					method: 'get',
				}).then(res=>{
					console.log(res)
					if(res.success){
						const data = res.data
						if(data && data.obj){
							this.log = data.obj
							this.formData.id = data.obj.id
						}else{
							this.log = null
						}
					}
				}).catch(()=>{
				})
			},
			handleClock(){
				this.formData.position = position
				if(!this.log){
					this.$api.toastMsg('请先进行到达打卡')
					return
				}
				uni.showModal({
					title: '离开签到',
					content: '确认离开签到？',
					success: (e)=>{
						console.log(e)
						if(e.confirm){
							uni.showLoading({
								title:'提交中',mask: true
							})
							this.$api.request(clockUrl,{
								method: 'post',
								data: this.formData
							}).then(res=>{
								uni.hideLoading()
								if(res.success){
									this.$api.toastMsg('打卡成功')
									this.initForm()
								}else{
									const msg = res.message || '网络异常,请稍后再试'
									this.$api.toastMsg(msg)
								}
							}).catch(()=>{
								uni.hideLoading()
							})
						}
					}
				})
			},
			gotoPage(page, before = 'adminPages/clock') {
				uni.navigateTo({
					url: `/pages/${before}/${page}/${page}`
				})
			}
		}
	}
</script>

<style lang="scss">
	.clock-in-panel{
		
		.info-panel{
			width: 690upx;
			margin: 50upx auto 0;
			.daoda-daka-item{
				margin-bottom: 40upx;
				height: 220upx;
				background: url('');
				background-size: 100% 100%;
			}
			.likai-daka-item{
				background: url('');
				background-size: 100% 100%;
				margin-bottom: 40upx;
				height: 220upx;
			}
			.daka-panel{
				display: flex;
				width: 100%;
				justify-content: space-between;
				align-items: center;
				height: 160upx;
				.daka-item{
					flex: 0 0 47%;
					height: 160upx;
					background: url('');
					background-size: 100% 100%;
				}
				.daka-log-item{
					flex: 0 0 47%;
					height: 160upx;
					background: url('');
					background-size: 100% 100%;
				}
			}
			.company-panel{
				border-radius: 20upx;
				background-color: #fff;
				box-shadow: 10upx 10upx 10upx rgba(100,100,100,0.1);
				margin-bottom: 40upx;
				.company-top{
					height: 30upx;
					background-color: #1B7CF9;
					border-radius: 20upx 20upx 0 0;
				}
				.company-content{
					padding: 20upx 30upx;
					.info-title{
						border-left: 10upx solid #156DAC;
						color: #156DAC;
						padding-left: 30upx;
						height: 36upx;
						line-height: 36upx;
						margin-bottom: 50upx;
					}
					.info-item{
						display: flex;
						justify-content: space-between;
						align-items: center;
						margin-bottom: 30upx;
						.label{
							flex: 0 0 200upx;
							color: #5A5A5A;
						}
						.value{
							flex: 1;
							text-align: right;
							color: #010101;
							&.blud{
								color: #156DAC;
							}
						}
					}
				}
			}
		}
	}
</style>
